<template>
	<view class="zq-button-container" 
		:style="{
			'width':setting.width + 'rpx',
			'height':setting.height + 'rpx',
			'padding':setting.interval + 'rpx',
			'boxShadow':!setting.showBoxShadow ? '' : setting.boxShadow ? setting.boxShadow : '0 0 20rpx ' + (shadowColors[color] || '#dddddd'),
			'borderRadius':setting.borderRadius,
			'background':colors[color] || color,
			'margin':margin
		}"
		:class="{'zq-button-animation':setting.hasAnimation}"
		@click.stop="handle"
		v-if="init"
	>
		<view class="zq-button" 
			:style="{
				'width':setting.width - setting.interval * 2 - setting.padding * 2 + 'rpx',
				'height':setting.height - setting.interval * 2 + 'rpx',
				'padding':'0 ' + setting.padding + 'rpx',
				'boxShadow':'0 0 ' + setting.insetShadow + 'rpx 2rpx #FFFFFF inset',
				'borderRadius':setting.borderRadius
			}"
		>
			<icon class="zq-button-dot" 
				:style="{
					'top':setting.interval + 2 + 'rpx',
					'left':setting.interval + 4 + 'rpx'
				}"></icon>
			<icon class="zq-button-border" 
				:style="{
					'top':setting.interval + 2 + 'rpx',
					'left':setting.interval + 20 + 'rpx'
				}"></icon>
			<text class="zq-button-text" 
				:style="{
					'fontSize':setting.fontSize + 'rpx',
					'color':setting.color
				}"
			>
				<slot></slot>
			</text>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			color:{//按钮背景色 red pink green blue gray orange yellow violet "red"
				default:"red",
				type:String
			},
			props:{//按钮配置项
				default:null,
				type:Object
			},
			margin:{//按钮边距
				default:"",
				type:String
			},
			type:{//按钮形状  rectangle长方形   circle圆形
				default:"rectangle",
				type:String
			}
		},
		data(){
			return{
				setting:{
					width:350,//按钮宽度
					height:100,//按钮高度
					interval:8,//气泡间隙
					padding:20,//气泡内左右间隔
					insetShadow:10,//内阴影宽度
					boxShadow:"",//外阴影
					showBoxShadow:true,//是否显示按钮外阴影
					borderRadius:"12rpx",//圆角
					fontSize:30,//按钮字号
					color:"#ffffff",//字体颜色
					clickDelay:200,//点击延迟毫秒数
					hasAnimation:true//是否有点击动画
				},
				colors:{//按钮颜色
					red:"linear-gradient(to bottom,#ff414d,#ff414d)",
					pink:"linear-gradient(to bottom,#FF7E9E,#FE4270)",
					green:"linear-gradient(to bottom,#65b017,#65b017)",
					blue:"linear-gradient(to bottom,#428cd4,#428cd4)",
					gray:"linear-gradient(to bottom,#999999,#999999)",
					orange:"linear-gradient(to bottom,#fc6b05,#fc6b05)",
					yellow:"linear-gradient(to bottom,#ffb62b,#ffb62b)",
					violet:"linear-gradient(to bottom,#6e6dd0,#6e6dd0)",
					cyan:"linear-gradient(to bottom,#117c6f,#117c6f)",
					black:"linear-gradient(to bottom,#333333,#333333)",
				},
				shadowColors:{//阴影颜色
					red:"#ff414d",
					pink:"#FE4270",
					green:"#65b017",
					blue:"#428cd4",
					gray:"#999999",
					orange:"#fc6b05",
					yellow:"#ffb62b",
					violet:"#6e6dd0",
					cyan:"#117c6f",
					black:"#333333"
				},
				isClick:false,
				init:false
			}
		},
		watch:{
			props(nVal){
				this.setting = Object.assign(this.setting,this.$store ? this.$store.state.zqButtonSetting : null,nVal);
			}
		},
		mounted() {
			this.setting = Object.assign(this.setting,this.$store ? this.$store.state.zqButtonSetting : null,this.props);
			this.init = true;
		},
		methods:{
			handle(event){
				this.isClick = true;
				if(event && this.isClick){
					let clickDelay = !this.clickDelay ? 200 : this.clickDelay < 20 ? 20 : this.clickDelay
					setTimeout(()=>{
						this.$emit("click");
						this.isClick = false;
					},200)
				}
			}
		}
	}
</script>

<style scoped>
	.zq-button-container{box-sizing: border-box;display: flex;flex-direction: row;align-items: center;justify-content: center;transition: all 0.2s;}
	.zq-button-animation:active{transform: scale(0.95);filter: brightness(95%);}
	.zq-button{position: relative;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.zq-button-dot{position: absolute;width: 10rpx;height: 10rpx;border-radius: 8rpx;background: #FFFFFF;opacity: 0.6;}
	.zq-button-border{position: absolute;width: 80rpx;height: 10rpx;border-radius: 5rpx;background:linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));opacity: 0.6;}
	.zq-button-text{text-align: center;}
</style>
